@import './variables.scss';

@mixin colorBtn($color, $hoverColor, $activeColor, $disabledColor) {
  background: $white;
  color: $color;
  font-size: 12px;
  height: auto;
  line-height: auto;

  &.van-button--default {
    background: $white;
    color: $color;
  }
  &:hover {
    background: $white;
    color: $hoverColor;
    &:before,
    &:after {
      color: $white;
      background: transparent;
    }
  }
  &:active {
    color: $activeColor;
    background: $white;
    &:before,
    &:after {
      color: $white;
      background: transparent;
    }
  }
  &.is-disabled {
    &.el-button--default {
      background: $white;
      color: $disabledColor;
    }
    &:hover {
      background: $white;
      color: $disabledColor;
      &:before,
      &:after {
        color: $disabledColor;
        background: transparent;
      }
    }
    &:active {
      color: $disabledColor;
      background: $white;
      &:before,
      &:after {
        color: $disabledColor;
        background: transparent;
      }
    }
  }
  border: none;
}

.txt-btn {
  &.yellow-btn {
    @include colorBtn(
      var(--yu-yellow-color),
      var(--yu-yellow-color--light),
      var(--yu-yellow-color--dark),
      var(--yu-yellow-color--disabled)
    );
  }
  &.gray-btn {
    @include colorBtn(var(--yu-gray-color), var(--yu-gray-color), var(--yu-gray-color), var(--yu-gray-color));
  }
}
